<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>
    //失去焦点函数
    function loseFocus(){
        var name = document.getElementById("username").value;
        if(name != "" && name != "admin"){
            alert("账户输入错误");
        }
    }
    //通过弹框打印自我简介
    function introduction(){
        //单选框性别读值
        var sex = document.getElementsByName("sex");
        for(var i=0;i<sex.length;i++){
            console.log(sex[i]);
            if(sex[i].checked){
                realSex = sex[i].value;
            }
        }
        //单选框学历读值
        var edu = document.getElementsByName("eduction");
        for(var i=0; i < edu.length; i++){
            if(edu[i].checked){
                realEdu = edu[i].value;
            }
        }

        //var str = "我是xx，今年xx岁，性别"+document.getElementById("sex").value+",学历是"+document.getElementById("eduction").value+","+document.getElementById("self-introduction").value;
        var str = "我是xx，今年xx岁，性别"+realSex+",学历是"+realEdu+","+document.getElementById("self-introduction").value;
        alert(str);
    }
</script>
<body> 
    <form action="" method="GET">
        <!-- 1.编写注册用户信息页面，内容包含
        用户名，密码，性别，学历（本科，专科），自我介绍；-->
        <p>用户名：<input id="username" type="text" placeholder="请输入用户名" onblur="loseFocus()"></p>
        <p>密码：<input id="pw" type="password"> </p>
        <!--
        <p>性别：<input type="text" id="sex"> </p>
        -->
        <p>性别：
                <input type="radio" name="sex" value="男"> 男
                <input type="radio" name="sex" value="女"> 女
        </p>

        <p>
            学历：
                <input type="radio" name="eduction" value="本科">本科
                <input type="radio" name="eduction" value="专科">专科
        </p>
        <p>个人简介：
                <textarea id="self-introduction" cols="10" rows="5"></textarea>
        </p>
        <!-- 2.通过按钮单击事件调用函数并通过弹框打印简介-->
        <p>
            <input type="submit" value="提交" onclick="introduction()">
        </p>
    </form>
    
</body>
</html>